<template>
  <div class="content-wrapper" >
    <div v-if="showMonitor" class="monitor-real" >
      <div class="monitor-list" >
        <div class="choose-type" >
          <p class="title" >监控列表</p>
          <div class="select-wrapper">
            <el-select
              class="select-width"
              v-model="form.classNo"
              size="small"
              clearable
              filterable
              placeholder="班级"
              @change="bindFilterEvent">
              <el-option v-for="key in gradeList" :key="key.id" :label="key.name" :value="key.id" />
            </el-select>
            <el-select
              class="select-width"
              v-model="form.grade"
              size="small"
              clearable
              filterable
              placeholder="年级"
              @change="bindFilterEvent">
              <el-option v-for="item in allgrade" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <el-select
              class="select-width"
              v-model="form.course"
              size="small"
              clearable
              filterable
              placeholder="课程"
              @change="bindFilterEvent">
              <el-option v-for="item in courseList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
            <el-select
              class="select-width"
              v-model="form.sub"
              size="small"
              clearable
              filterable
              placeholder="专业"
              @change="bindFilterEvent">
              <el-option v-for="item in allmajor" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </div>
        </div>
        <!--     监控列表    -->
        <div class="main-list" >
          <MonitorListModel ref="MonitorListModelRef"></MonitorListModel>
        </div>
      </div>


      <div class="ranking-list" >
        <!--  班级排行榜  -->
        <GradeRankingList />

        <!--  学生排行榜  -->
        <StudentRankingList />
      </div>
    </div>

    <RealTimePlay v-else></RealTimePlay>
  </div>
</template>

<script>
import RealTimePlay from "../../components/RealTimePlay";
import MonitorListModel from "../../components/MonitorListModel";
import GradeRankingList from "../../components/monitor/GradeRankingList";
import StudentRankingList from "../../components/monitor/StudentRankingList";
import $ from 'jquery'
import { mapState, mapActions } from "vuex";

export default {
  name: "realTimeMonitor",
  components: {
    MonitorListModel, RealTimePlay, GradeRankingList, StudentRankingList
  },
  data() {
    return {
      showMonitor: true,
      allgrade: [{
        value: '1',
        label: '一年级'
      }],
      allmajor: [{
        value: '1',
        label: '一年级'
      }],
      form: {
        grade: '',
        course: '',
        sub: '',
        classNo: '',
      }
    }
  },

  computed: {
    ...mapState(["gradeList", "courseList"])
  },

  mounted() {
    this.getCourseList();
    this.getGradeList();
  },

  methods: {
    ...mapActions(["getCourseList", "getGradeList"]),

    showMonitorIf() {
      this.showMonitor = !this.showMonitor
      if (this.showMonitor == false) {
        $('.content-wrapper').addClass('active')
      } else {
        $('.content-wrapper').removeClass('active')
      }
    },

    //班级
    bindFilterEvent() {
      this.$refs.MonitorListModelRef.getMonitorList(this.form);
    }
  }
}
</script>

<style scoped lang="scss" >
@import "../../styles/element-reset";

.active {
  width: 100% !important;
  padding: 30px 40px !important;
}

.content-wrapper {
  padding: 30px 0 50px;

  .monitor-real {
    display: flex;
    justify-content: space-between;

    .monitor-list {
      width: 847px;

      .choose-type {
        width: 847px;
        height: 78px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: white;

        .title {
          font-size: 20px;
          margin-left: 20px;
          font-weight: 400;
        }

        .select-wrapper {
          padding-right: 20px;
        }
      }

      .main-list {
        margin-top: 20px;
      }
    }

    .ranking-list {
      flex: 1;
      margin-left: 20px;
    }
  }
}

.select-width{
  width: 120px;
  margin-left: 4px;
}
</style>
